<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box,#box1{
        	width: 300px;
        	height: 200px;
        	background: red;
        	margin: 0 auto;
        }
        #box1{
        	margin-top: 30px;
        }
        #box>button,#box1>button{
            width: 100px;
            height: 30px;
            float: left;
        }
       #box>div,#box1>div{
            width: 300px;
            height: 170px;
            display: none;
            text-align: center;
        }
        #box>button.active,#box1>button.active{
            background-color: #e6578a;
            color: white;
        }
        #box>div.active, #box1>div.active{
            display: block;
        }
    </style>
    <script>
        window.onload = function () {
            var t1 = new Tab("#box")
            t1.init()//初始化
            var t1 = new Tab("#box1")
            t1.init()//初始化
        }
        function Tab(id) {
            this.Div1 = document.querySelector(id)
            this.btn1 = this.Div1.querySelectorAll("button")
            this.aDiv = this.Div1.querySelectorAll("div");
        }
        Tab.prototype.init = function () {
            for(var i=0;i<this.btn1.length;i++){
                this.btn1[i].index = i;//button的下标
                var This = this;
                this.btn1[i].onclick = function () {
                    This.changeTab(this)
                }
            }
        }
        Tab.prototype.changeTab = function (btn1){
            for(var i=0;i<this.btn1.length;i++){
                this.btn1[i].className = ""
                this.aDiv[i].style.display = "none"
            }
            btn1.className = "active";
            this.aDiv[btn1.index].style.display = "block"
        }
    </script>
</head>
<body>

<div id="box">
    <button class="active">第一1</button>
    <button>第二2</button>
    <button>第三3</button>
    <div class="active">第一1</div>
    <div>第二2</div>
    <div>第三3</div>
</div>
<div id="box1">
    <button class="active">第一1</button>
    <button>第二2</button>
    <button>第三3</button>
    <div class="active">第一1</div>
    <div>第二2</div>
    <div>第三3</div>
</div>

</body>
</html>